html{
    font-size: 50px;
}

// 首页样式文件
@import "common";
body{
    min-width: 320px;
    width: 15rem;
    margin: 0 auto;
    line-height: 1.5;
    font-family: Arial, Helvetica;
    background-color: #f2f2f2;
}
// 当前设计稿宽度 / 划分的份数
@basefont:50;

.top{
    display: flex;
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 15rem;
    height: 88rem / @basefont;
    background-color: #ffc001;
    .fenlei {
        width: 44rem / @basefont;
        height: 70rem / @basefont;
        margin: 11rem / @basefont 25rem / @basefont 7rem / @basefont 24rem / @basefont;
        background: url(../images/classify.png) no-repeat;
        background-size:44rem / @basefont 70rem / @basefont ;
    }
    .search{
        flex: 1;
        input{
            width: 100%;
            height: 66rem / @basefont;
            border-radius: 33rem / @basefont;
            background: #fff2cc;
            margin-top: 12rem / @basefont;
            font-size: 25rem / @basefont;
            text-indent: 2em;
            color: #666;
        }
    }
    .dengru{
        width: 75rem / @basefont;
        height: 70rem / @basefont;
        margin: 10rem / @basefont;
        font-size: 25rem / @basefont;
        color: #fff;
        text-align: center;
        line-height: 70rem / @basefont;
    }
}
.banner{
    width: 750rem / @basefont;
    height: 368rem / @basefont;
    img{
        width: 100%;
        height: 100%;
    }
}
.ad{
    display: flex;
    a{
        flex: 1;
        img{
            width: 100%;
        }
    }
}
.nav{
    width: 750rem / @basefont;
    margin-top: 10rem / @basefont;
    a{
        float: left;
        width: 150rem / @basefont;
        height: 142rem / @basefont;
        text-align: center;
        img{
            display: block;
            width: 84rem / @basefont;
            height: 84rem / @basefont;
            margin: 11rem / @basefont auto 0;
        }
        span{
            display: block;
            font-size: 25rem / @basefont;
            color: #333;
            margin-top: 5rem / @basefont;
        }
    }
}
.bgad{
    display: flex;
    margin:  24rem / @basefont 0;
    a{
        flex: 1;
        height: 234rem / @basefont;
        img{
            width: 100%;
            height: 100%;
        }
        &:nth-child(1){
            flex: 2;
        }
        &:nth-child(2){
            border-left: 2px / @basefont solid #fff;
            border-right: 2px / @basefont solid #fff;
         }
    }
}
.n1{
    border-radius: 10rem / @basefont 10rem / @basefont 0 0;
}
.price{
    display: flex;
    width: 702rem / @basefont;
    height: 258rem / @basefont;
    margin: 0 24rem / @basefont;
    background-color: #fff;
    .item{
        flex: 1;
        &:nth-child(1){
            border-right: 1rem / @basefont solid #ccc;
        }
        h3{
            font-size: 28rem / @basefont;
            margin: 18rem / @basefont 8rem / @basefont 0 24rem / @basefont ;
            }
        .title{
            width: 350rem / @basefont;
            height: 58rem / @basefont;
           
            span,i{
                float: left;
                margin-top: 24rem / @basefont;
                font-size: 20rem / @basefont;
                font-weight: 700;
            }
            i{
                margin:20rem / @basefont 5rem / @basefont 0;
            }
            span{
                display: block;
                width: 34rem / @basefont;
                height: 28rem / @basefont;
                background-color: #ffcc00;
                text-align: center;
                border-radius: 10rem / @basefont;
                 }
            } 
        p{
            margin: 4rem / @basefont 0 0 24rem / @basefont;
            font-size: 24rem / @basefont;
            line-height: 30rem / @basefont;
            color: #999;
        }
    }
    .lowprice{
        h3{
            float: left;
        }
        ul{
            overflow: hidden;
            margin-top: 5rem / @basefont;
            padding-left: 28rem / @basefont;
            li{
                float: left;
                width: 120rem / @basefont;
                height: 149rem / @basefont;
                img{
                   width: 100%;     
                }
                p{
                    font-size: 26rem / @basefont;
                    color: #F50;
                    margin-left: 0;
                    text-align: center;
                    span{
                        font-size: 22rem / @basefont;
                    }
                }
                &:nth-child(1){
                    margin-right: 55rem / @basefont;
                }
            }
        }

    }
    .msprice{
        .cp{
            overflow: hidden;
            margin-left: 25rem / @basefont;
            margin-top:20rem / @basefont;
            a{
            float: left;
            width: 160rem / @basefont;
            height: 160rem / @basefont;
            padding: 0 20rem / @basefont;
                img{
                    width: 100%;   
                }
                p{
                    width: 150rem / @basefont;
                    height: 54rem / @basefont;
                    text-align: center;
                    padding-top: 22rem / @basefont;
                    margin-top: -20rem / @basefont;
                    margin-left: -15rem / @basefont;
                    font-size: 20rem / @basefont;
                    background: url(../upload/bg1.png) no-repeat 0 0;
                    background-size: 150rem / @basefont 54rem / @basefont;
                }
            }
        }
    }
}
.tuijian{
    display: flex;
    margin: 0 24rem / @basefont;
    border-top: 2rem / @basefont solid #ccc;
    background-color: #fff;
    border-radius: 0 0 10rem / @basefont 10rem / @basefont;
    .tjleft{
        padding: 47rem / @basefont 18rem / @basefont 0;
        width: 173rem / @basefont;
        height: 172rem / @basefont;
        p{
            &:nth-child(1){
                font-size: 32rem / @basefont;
                font-weight: 700;
                color: #444;
            }
            &:nth-child(2){
                font-size: 24rem / @basefont;
                color: #999;
            }
        }
        
    }
    .tuijright{
        flex: 1;
        display: flex;
        a{
            flex: 1;
            text-align: center;
            img{
                display: block;
                width: 100rem / @basefont;
                margin: 20rem / @basefont auto 10rem / @basefont;
            }
            p{
                font-size: 22rem / @basefont;
                color: #333;
            }
        }
    }

}
.foot{
    display: flex;
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 15rem;
    height: 88rem / @basefont;
    a{
        flex: 1;
        height: 88rem / @basefont;
        background-color: plum;
        text-align: center;
        font-size: 25rem / @basefont;
        i{
            display: block;
            margin: 1px auto;
            width: 50rem / @basefont;
            height: 50rem / @basefont;
            background: url(../images/sprite.png) -116rem / @basefont -386rem / @basefont;
            background-size: 208rem / @basefont 655rem / @basefont;
        }
    }
}